<template>
	<div class="movie-body">
		<ul>
			<li v-for="item in comingPlayData" :key="item.id">
				<div class="pic_show"><img :src="item.img"></div>
				<div class="info_list">
					<h2>{{item.name}}</h2>
					<p><span class="person">{{item.people}}</span>人想看</p>
					<p>{{item.actors}}</p>
					<p>未来30天内上映</p>
				</div>
				<div class="desc-button">
					<button class="btn-pre">预售</button>
				</div>
			</li>
		</ul>
	</div>
</template>

<script>
	export default{
		data(){
			return{
				comingPlayData:[]
			}
		},
		created(){
			this.getcomingPlayData();
		},
		methods:{
			getcomingPlayData(){
				var that=this;
				axios.get('/mock/comingPlayData.json')
				.then(response=>{
					console.log(response);
					if(response.status==200){
						if(response.data && response.data.comingPlayData){
							that.comingPlayData=response.data.comingPlayData;
						}
					}
				})
				.catch(function(error){
					console.log(error);
				})
			}
		}
	}
</script>

<style scoped>
	img{
		width:70px;
	}
	.pic_show{
		width:23%;
		margin-bottom:10px;
		float:left;
	}
	.info_list{
		width:60%;
		float:left
	}
	.info_list h2{
		font-weight:bold;
		font-size:20px;
	}
	.info_list p{
		font-size:13px;
		color:#666;
		line-height:22px;
		width:200px;
		overflow:hidden;
		white-space:nowrap;
		text-overflow:ellipsis;
	}
	li{
		margin:15px;
		overflow: hidden;
		border-bottom:1px solid #cccccc;
	}
	button{
		width:47px;
		height:27px;
		text-align:center;
		background-color: #f03d37;
		color:#fff;
		border-radius:4px;
		border:none;
		font-size:12px;
		cursor:pointer;
	}
	.btn-pre{
		margin-top: 30px;
		background-color: rgb(42, 172, 215);
	}
	.person{
		color:#faaf00;
		font-size:15px;
	}
</style>
